<template>
	<jk-dialog
		v-model="showDialog"
		title="详情-生产投料"
		width="1100px"
		:show-content-loading="showLoading"
		append-to-body
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" :model="ruleForm" label-width="110px" :show-message="false">
			<el-row ref="box1">
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="单据编号">
						<span class="read-only-2">{{ ruleForm.code }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="投料日期">
						<span class="read-only-2">{{ ruleForm.feedstockDateTime }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="投料班次">
						<span class="read-only-2">{{ ruleForm.shiftName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="投料人">
						<span class="read-only-2">{{ throwMaterialList }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="清花线">
						<span class="read-only-2">{{ ruleForm.productionLineName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="品种">
						<span class="read-only-2">{{ ruleForm.productName }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item class="margin-bottom-10" label="批号">
						<span class="read-only-2">{{ ruleForm.batchCode }}</span>
					</el-form-item>
				</el-col>
			</el-row>
			<div class="flex-start box" :style="{height: `${dialogTableHeight - 50}px`}">
				<div class="tabLeft">
					<el-tag type="primary" effect="plain" class="margin-bottom-10">
						<span class="el-icon-tickets item-gap"></span>
						<span>原棉投料</span>
					</el-tag>
					<jk-table ref="jkTable" :data="ruleForm.productList" border :footer-method="footerMethod" show-footer :height="dialogTableHeight - 140" style="width: 100%">
						<vxe-column title="操作" align="center" field="operation" :width="70" fixed="left">
							<template slot="header">
								<span size="mini" type="text">添加</span>
							</template>
							<template slot-scope="scope">
								<div class="flex-center">
									<span type="text" size="mini" icon="el-icon-delete"></span>
								</div>
							</template>
						</vxe-column>
						<vxe-table-column field="valMax" title="原料批号" align="center" :min-width="130" prop="billDate">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.batchCode" disabled size="mini">{{ scope.row.batchCode }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="productNum" title="件数" align="center" :min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.productNum" disabled size="mini">{{ scope.row.productNum }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="productQty" title="单件重(公斤)" align="center" :min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.productQty" disabled size="mini">{{ scope.row.productQty }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="allQty" title="合计重量(公斤)" align="center" :min-width="120">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.allQty" disabled size="mini">{{ scope.row.allQty }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
				<div class="tabRight">
					<el-tag type="primary" effect="plain" class="margin-bottom-10">
						<span class="el-icon-tickets item-gap"></span>
						<span>回花投料</span>
					</el-tag>
					<jk-table ref="jkTable" :data="ruleForm.productListHH" :footer-method="footerMethodHH" show-footer border :height="dialogTableHeight - 140" style="width: 100%">
						<vxe-column title="操作" align="center" field="operation" :width="70" fixed="left">
							<template slot="header">
								<span size="mini" type="text">添加</span>
							</template>
							<template slot-scope="scope">
								<div class="flex-center">
									<span type="text" size="mini" icon="el-icon-delete"></span>
								</div>
							</template>
						</vxe-column>
						<vxe-table-column field="valMax" title="回花品种" align="center" :min-width="130">
							<template slot-scope="scope">
								<div class="flex-center">
									<el-select v-model="scope.row.productId" disabled size="mini" placeholder="请选择" class="width-100-percent">
										<el-option v-for="item in lapWasteVarietyList" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="subQty" title="件数" align="center" :min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.productNum" disabled size="mini">{{ scope.row.productNum }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="productQty" title="单件重(公斤)" align="center" :min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.productQty" disabled size="mini">{{ scope.row.productQty }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="allQty" title="合计重量(公斤)" align="center" :min-width="120">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-input v-model="scope.row.allQty" disabled size="mini">{{ scope.row.allQty }}</jk-input>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
			</div>
			<div style="display: flex; align-items: center; justify-content: center">
				<el-tag>原棉回花合计：{{ printedNumbers + printedHHNumbers }}（公斤）</el-tag>
			</div>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { productionFeedstockGet } from '../../../../api/production/feedMaterial';
    import { spinMaterialPage } from '@/api/material/rawMaterial';
    import XEUtils from 'xe-utils';
    export default {
        name: 'FeedingMaterial',
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                lapWasteVarietyList: [],
                showDialog: false,
                showLoading: true,
                throwMaterialList: '',
                ruleForm: {
                    'empList': [],
                    'productList': []
                },
                printedNumbers: [],
                printedHHNumbers: []
            };
        },
        methods: {
            footerMethodHH({ columns, data }) {
                const keys = ['productNum', 'productQty', 'allQty'];
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计';
                        }
                        if (keys.includes(column.field)) {
                            this.printedHHNumbers = XEUtils.sum(data, column.field);
                            return XEUtils.sum(data, column.field);
                        }
                        return null;
                    })
                ];
            },
            footerMethod({ columns, data }) {
                const keys = ['productNum', 'productQty', 'allQty'];
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计';
                        }
                        if (keys.includes(column.field)) {
                            this.printedNumbers = XEUtils.sum(data, column.field);
                            return XEUtils.sum(data, column.field);
                        }
                        return null;
                    })
                ];
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getLapWasteVariety() {
                const params = {
                    pageNo: 1,
                    pageSize: 100,
                    typeCode: 'HH'
                };
                return spinMaterialPage(params).then(res => {
                    if (res.data.status === 200) {
                        this.lapWasteVarietyList = res.data.res;
                    }
                });
            },
            getDetailRequest() {
                this.showLoading = true;
                productionFeedstockGet({ id: this.dataId }).then(res => {
                    this.showLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                        const arry = [];
                        this.ruleForm.empList.forEach(x => {
                            arry.push(x.name);
                        });
                        this.throwMaterialList = arry.join('、'); // 使用空格作为分隔符
                        this.getLapWasteVariety();
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDetailRequest();
                }
            }
        }
    };
</script>
<style scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabLeft {
  margin-right: 10px;
}
</style>
